<template>
  <div>
      <div class="myRow">
        <div>
          <i-button class="myButton" type="info" ghost icon="md-add-circle"  @click="modal = true">新增账号</i-button>
          <i-button :disabled="selectList.length === 0" class="myButton" type="success" ghost icon="md-checkmark-circle" @click="enableDisableList(0)">批量启用</i-button>
          <i-button :disabled="selectList.length === 0" class="myButton" type="error" ghost icon="md-remove-circle" @click="enableDisableList(1)">批量禁用</i-button>
        </div>
        <div>
          <Input v-model="searchData" icon="ios-search" @on-click="getListFun" @on-enter="getListFun" placeholder="搜索内容" style="width: auto" />
        </div>
      </div>
      <i-table :loading="loading" border ref="selection" :columns="columns4" :data="listData.listT" @on-selection-change="selectChange"></i-table>
      <div class="footPage">
        <Page @on-change="changePage" :total="listData.recordCount" :page-size="listData.pageSize" :current="pageIndex"/>
      </div>
      <Modal
        v-model="modal"
        title="新增账号">
        <div>
          <i-form :model="addData" label-position="right" ref="addData" :rules="ruleValidate" :label-width="100">
            <FormItem label="账号：" prop="loginName">
                <i-input v-model="addData.loginName"></i-input>
            </FormItem>
            <FormItem label="密码：" prop="pwd">
                <i-input type="password" v-model="addData.pwd"></i-input>
            </FormItem>
            <FormItem label="角色：" prop="roleId">
              <RadioGroup v-model="addData.roleId">
                  <Radio v-for="(item, index) in roleListData" :key="index" :label="Number(item.id)">{{item.name}}</Radio>
                  <!-- <Radio :label="1">管理员</Radio> -->
              </RadioGroup>
            </FormItem>
            <FormItem label="所属部门：" prop="departmentName">
                <i-input v-model="addData.departmentName"></i-input>
            </FormItem>
            <FormItem label="账号状态：">
              <RadioGroup v-model="addData.isDelete">
                  <Radio :label="0">启用</Radio>
                  <Radio :label="1">禁用</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="后台管理员：">
              <RadioGroup v-model="addData.isAdmin">
                  <Radio :label="1">是</Radio>
                  <Radio :label="0">否</Radio>
              </RadioGroup>
            </FormItem>
          </i-form>
        </div>
        <div slot="footer">
            <i-button type="text" :loading="modal_loading" @click="reset('addData')">重置</i-button>
            <i-button type="primary" :loading="modal_loading" @click="ok('addData')">确定</i-button>
        </div>
    </Modal>
    <Modal
        v-model="modal2"
        title="修改账号">
        <div>
          <i-form :model="editData" label-position="right" ref="editData" :rules="ruleValidate" :label-width="100">
            <FormItem label="账号：" prop="loginName">
                <i-input v-model="editData.loginName"></i-input>
            </FormItem>
            <FormItem label="角色：" prop="roleId">
              <RadioGroup v-model="editData.roleId">
                  <Radio v-for="(item, index) in roleListData" :key="index" :label="Number(item.id)">{{item.name}}</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="所属部门：" prop="departmentName">
                <i-input v-model="editData.departmentName"></i-input>
            </FormItem>
            <FormItem label="账号状态：" prop="isDelete">
              <RadioGroup v-model="editData.isDelete">
                  <Radio :label="0">启用</Radio>
                  <Radio :label="1">禁用</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="后台管理员：">
              <RadioGroup v-model="editData.isAdmin">
                  <Radio :label="1">是</Radio>
                  <Radio :label="0">否</Radio>
              </RadioGroup>
            </FormItem>
          </i-form>
        </div>
        <div slot="footer">
            <i-button type="text" :loading="modal_loading" @click="reset2('editData')">重置</i-button>
            <i-button type="primary" :loading="modal_loading" @click="editFun('editData')">保存</i-button>
        </div>
    </Modal>
  </div>
</template>

<script>
import {
  AddManagementUserInfo,
  DeleteManagementUserInfo,
  UpdateManagementUserInfo,
  GetRolePermissionsRoleAllInfo,
  UpdateManagementUserInfoByIdsOrId,
  GetManagementUserInfoPager
} from "@/api/userLogin";
export default {
  name: "home",
  components: {},
  data() {
    return {
      ruleValidate: {
        loginName: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        departmentName: [
          {
            required: true,
            message: "请输入所属部门",
            trigger: "blur"
          }
        ]
        // roleId: [{ required: true, message: "请选择角色", trigger: "blur" }]
      },
      searchData: "",
      roleListData: [], // 角色列表
      selectList: [], // 选中列表
      selectStr: "", // 选中列表id字符串
      pageIndex: 1, // 当前页
      modal_loading: false,
      addData: {
        loginName: "",
        departmentName: "",
        pwd: "",
        roleId: 6,
        isDelete: 0,
        isAdmin: 0
      },
      editData: {
        loginName: "",
        departmentName: "",
        roleId: 6,
        isDelete: 0,
        isAdmin: 0
      },
      editId: "",
      modal: false,
      modal2: false,
      loading: false,
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "账号",
          key: "loginName",
          align: "center"
        },
        {
          title: "角色名",
          key: "roleName",
          align: "center"
        },
        {
          title: "账号状态",
          key: "isDelete",
          align: "center",
          render: (h, params) => {
            var text = "启用";
            if (params.row.isDelete) {
              text = "禁用";
            }
            return h("span", text);
          }
        },
        {
          title: "是否后台管理员",
          key: "isAdmin",
          align: "center",
          render: (h, params) => {
            var text = "否";
            if (params.row.isAdmin) {
              text = "是";
            }
            return h("span", text);
          }
        },
        {
          title: "开通时间",
          key: "updateTime",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.deleteBtn(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      listData: {}
    };
  },
  mounted() {
    this.getListFun();
    this.getRoleList();
  },
  methods: {
    // 获取角色列表
    getRoleList() {
      GetRolePermissionsRoleAllInfo()
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "roleListData", res.data.result);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取用户列表数据
    getListFun() {
      this.$set(this, "loading", true);
      const p = {
        pageIndex: this.pageIndex,
        pageSize: "10",
        keyWord: this.searchData
      };
      GetManagementUserInfoPager(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "listData", res.data.result);
          }
          this.$set(this, "loading", false);
        })
        .catch(err => {
          console.log(err);
          this.$set(this, "loading", false);
        });
    },
    // 新增接口
    addFun() {
      const p = {
        loginName: this.addData.loginName,
        departmentName: this.addData.departmentName,
        pwd: this.addData.pwd,
        isDelete: this.addData.isDelete,
        isAdmin: this.addData.isAdmin,
        roleId: this.addData.roleId
      };
      AddManagementUserInfo(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "addData", {
              loginName: "",
              departmentName: "",
              pwd: "",
              roleId: 6,
              isDelete: 0,
              isAdmin: 0
            });
            this.getListFun();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    custom() {
      this.$Modal.confirm({
        title: "Title",
        content: "<p>Content of dialog</p><p>Content of dialog</p>",
        okText: "OK",
        cancelText: "Cancel"
      });
    },
    // 分页回调方法
    changePage(index) {
      this.$set(this, "pageIndex", index);
      this.getListFun();
    },
    ok(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.addFun();
          this.$set(this, "modal", false);
        } else {
          this.$Message.error("提交内容有误！请检查");
        }
      });
    },
    editFun(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          const p = {
            loginName: this.editData.loginName,
            departmentName: this.editData.departmentName,
            roleId: this.editData.roleId,
            isDelete: this.editData.isDelete,
            isAdmin: this.editData.isAdmin,
            id: this.editId
          };
          UpdateManagementUserInfo(p)
            .then(res => {
              if (res.data.code === "0") {
                this.$set(this, "editData", {
                  loginName: "",
                  departmentName: "",
                  roleId: 6,
                  isDelete: 0,
                  isAdmin: 0
                });
                this.getListFun();
              }
            })
            .catch(err => {
              console.log(err);
            });
          this.$set(this, "modal2", false);
        } else {
          this.$Message.error("提交内容有误！请检查");
        }
      });
    },
    edit(params) {
      this.$set(this, "editData", {
        loginName: params.row.loginName,
        departmentName: params.row.departmentName,
        roleId: params.row.roleId,
        isDelete: params.row.isDelete,
        isAdmin: params.row.isAdmin
      });
      this.$set(this, "editId", params.row.id);
      this.$set(this, "modal2", true);
    },
    enableDisableFun(ids, type) {
      const p = {
        idsStr: ids,
        IsDelete: type
      };
      UpdateManagementUserInfoByIdsOrId(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "selectList", []);
            this.$set(this, "selectStr", "");
            this.getListFun();
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.$set(this, "modal2", false);
    },
    deleteFun(id) {
      const p = {
        id: id
      };
      DeleteManagementUserInfo(p)
        .then(res => {
          if (res.data.code === "0") {
            this.getListFun();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    deleteBtn(params) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "一旦删除不可撤销，确认删除？",
        onOk: () => {
          this.deleteFun(params.row.id);
        },
        onCancel: () => {
          this.$Message.info("操作取消");
        }
      });
    },
    reset(name) {
      this.$refs[name].resetFields();
      this.$set(this, "addData", {
        loginName: "",
        departmentName: "",
        pwd: "",
        roleId: 6,
        isDelete: 0,
        isAdmin: 0
      });
    },
    enableDisableList(type) {
      this.$Modal.confirm({
        title: "确认更改",
        content: "批量更改，一旦更改所选项将全部更改且无法撤销，确认更改？",
        onOk: () => {
          this.enableDisableFun(String(this.selectStr), type);
        },
        onCancel: () => {
          this.$Message.info("操作取消");
        }
      });
    },
    selectChange(list) {
      var str = "";
      this.$set(this, "selectStr", "");
      for (var i = 0; i < list.length; i++) {
        str = str + "," + list[i].id;
      }
      this.$set(this, "selectList", list);
      this.$set(this, "selectStr", str);
    },
    reset2(name) {
      this.$refs[name].resetFields();
      this.$set(this, "editData", {
        loginName: "",
        departmentName: "",
        roleId: 6,
        isDelete: 0,
        isAdmin: 0
      });
    }
  }
};
</script>

<style lang="less">
.myRow {
  width: 100%;
  margin: 0px 0px 10px;
  display: flex;
  justify-content: space-between;
}
.myButton {
  margin-right: 6px;
}
.footPage {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
</style>
